
/* 
分页
  1 总条数 50
  2 总页数 5 
  3 页容量 10 

 */

$(function () {

  // 全局变量 接口的参数
  let params = {
    // string	搜索关键词，可以为空，为空返回某类型所有文章
    key: "",
    // string	文章类型id，可以为空，为空返回所有类型文章
    type: "",
    // string	文章状态，草稿 ，已发布,为空返回所有状态文章
    state: "",
    // number	当前页，为空返回第1页
    page: 1,
    // number	每页显示条数，为空默认每页6条
    perpage: 10
  }

  articleQuery();
  getArticleCatetory();


  // 1 发送请求获取文章列表数据
  function articleQuery() {
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/article/query",
      data: params,
      headers: {
        Authorization: localStorage.getItem("token")
      },
      success(res) {

        if (res.code === 200) {
          const list = res.data.data;
          const html = template("trTpl", { list });
          $("#articleTable tbody").html(html);

          // 获取总条数
          const totalCount = res.data.totalCount;
          renerPager(totalCount);
        } else {
          console.log("失败");
          console.log(res);
        }
      }
    })

  }

  // 2 渲染 layui 分页组件
  function renerPager(totalCount) {
    var laypage = layui.laypage;

    //执行一个laypage实例
    laypage.render({
      elem: 'pager', //注意，这里的 test1 是 ID，不用加 # 号
      limit: params.perpage,// 页容量定为10！！ 
      curr: params.page,
      count: totalCount,//数据总数，从服务端得到
      jump(obj, first) {
        if (!first) {
          params.page = obj.curr;
          articleQuery();
        }
      }
    });

  }

  // 3 动态渲染 文章分类下拉列表
  function getArticleCatetory() {
    // 3.1 发送请求获取文章分类数据
    $.ajax({
      url: "http://localhost:8080/api/v1/admin/category/list",
      headers: {
        Authorization: localStorage.getItem("token")
      },
      success(res) {
        // console.log(res);
        if (res.code === 200) {
          // 3.2 不使用模版引擎 标签简单
          const html = res.data.reduce((html, value) => html += `<option value='${value.id}'>${value.name}</option>`, '<option value="">所有分类</option>');
          $("#selCategory").html(html);
        } else {
          console.log("失败");
          console.log(res);
        }
      }
    })
  }


  // 4 点击筛选按钮  (只要是做筛选 那么一定会重置页码！！！ )
  $("#btnSearch").on("click", function () {
    //  4.1 获取正确的参数 接口文档 要求！！！ 
    params.key = $("#aname").val().trim();
    // 文章类型的id  原生的select标签的知识   (option value= id   获取选中的值 可以看成是普通的输入框来获取)
    params.type = $("#selCategory").val();
    // 文章发布状态 
    params.state = $("#selStatus").val();

    // 重置 页码  1
    params.page = 1;

    // 4.2 拼接参数发送请求 获取筛选后的数据
    articleQuery();

    // 4.3 有bug 如何去解决  （点击筛选的时候 要重置页码  1 ）
    // 1 点击 22 页  params.page=22 
    // 2 点击 草稿   params.state=草稿 （11页 ）
    // 3 点击 筛选按钮  获取 params 来发送请求  

  })

  // 5 重置
  $("#btnReset").on("click", function () {
    // 5.1 重置组件
    $("#aname").val("")
    $("#selCategory").val("");
    $("#selStatus").val("");
    // 5.2 重置接口参数 
    params = {
      key: "",
      type: "",
      state: "",
      page: 1,
      perpage: 10
    }

    // 5.3 重新发送请求
    articleQuery();
  })

  // 6 删除按钮  事件委托
  $("#articleTable").on("click", ".delete", function () {
    // 6.1弹出确认框 layui
    layer.confirm("您是否要删除", (index) => {
      const id = $(this).parents("tr").data("id");
      $.ajax({
        url: "http://localhost:8080/api/v1/admin/article/delete",
        type: "post",
        data:{id},
        headers: {
          Authorization: localStorage.getItem("token")
        },
        success(res) {
          if (res.code == 200) {
            articleQuery();
            layer.close(index);
          } else {
            console.log("失败");
            console.log(res);
          }
        }
      })
    
    })

    // 6.2 获取被删除的元素的id
    // 6.3 拼接参数发送请求 完成删除
    // 6.4 刷新数据

  })

})